<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>局部组件</title>
	<script src="js/vue.js"></script>
</head>
<body>
		
<div id="app">
	<div>
		<input type="text" v-model="inputValue">
		<button @click="itemPush">提交</button>
	</div>
	<ul>
		<todo-item v-for="(item, index) in list" :key="index" :content="item"></todo-item>
	</ul>
</div>

</body>
<script>
let vm = new Vue({
	el:'#app',
	data: {
		inputValue: "hello",
		list: ['test1', 'test2']
	},
	components:{
		'todo-item':{
			props:['content'],
			template:`<li>{{content}}</li>`
		}
	},
	methods:{
		itemPush:function(){
			this.list.unshift(this.inputValue);
			this.inputValue = '';
		}
	}
})
</script>
</html>
